<template>
  <div>
    <el-card class="box-card">
      <el-button style="margin-bottom: 10px;" type="primary" size="mini" @click="add()">新增下级</el-button>
      <el-table
        style="margin-bottom: 20px"
        :header-cell-style="{ background: '#eee' }"
        border
        :data="tableData"
      >
        <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
        <!-- <el-table-column align="center" prop="himg" label="头像">
          <template slot-scope="scope">
            <img style="width: 40px" :src="scope.row.himg" alt />
          </template>
        </el-table-column>-->
        <el-table-column align="center" prop="nickname" label="昵称"></el-table-column>
        <el-table-column align="center" prop="name" label="姓名"></el-table-column>
        <el-table-column align="center" prop="mobile" label="手机号"></el-table-column>
        <el-table-column align="center" prop="sum_money" label="总流水"></el-table-column>
        <el-table-column align="center" prop="c_money" label="总充值"></el-table-column>
        <el-table-column align="center" prop="yingkui" label="总盈亏"></el-table-column>
        <el-table-column align="center" prop label="佣金比例">
          <template slot-scope="scope">
            <span>{{ scope.row.new_bi*100 }}%</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop label="过期时间">
          <template slot-scope="scope">
            <span>{{scope.row.new_pass_time? parseTime(scope.row.new_pass_time) :''}}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop label="注册时间">
          <template slot-scope="scope">
            <span>{{ parseTime(scope.row.add_time) }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" prop label="操作" width="120px">
          <template slot-scope="scope">
            <el-button type="primary" size="mini" @click="edit(scope.row)">修改佣金比例</el-button>

            <!-- <div>
              <el-button type="primary" size="mini" @click="edit(scope.row)">编辑</el-button>
            </div>
            <div>
              <el-button type="primary" size="mini" @click="addUser(scope.row)"></el-button>
            </div>-->
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: right">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="query.currentPage"
          :total="query.total"
          @current-change="currentChange"
        ></el-pagination>
      </div>
    </el-card>

    <el-dialog title="编辑" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
      <el-form ref="form" :model="form" label-width="120px">
        <el-form-item label="修改佣金比例：">
          <el-input-number
            v-model="form.new_bi"
            :min="0"
            :max="1"
            :precision="3"
            :step="0.001"
            label="描述文字"
          ></el-input-number>
        </el-form-item>
        <el-form-item label="到期时间">
          <el-date-picker v-model="form.endTime" type="datetime" placeholder="选择日期时间"></el-date-picker>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="onSubmit">立即创建</el-button>
          <el-button>取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
    <el-dialog
      title="新增下级"
      :visible.sync="userdialogVisible"
      width="80%"
      :before-close="handleClose"
    >
      <el-row :gutter="20">
        <el-col :span="8">
          <el-input v-model="userquery.keywords" clearable></el-input>
        </el-col>
        <el-col :span="8">
          <el-button type="primary" @click="searchUser">搜索</el-button>
        </el-col>
      </el-row>
      <el-table
        ref="multipleTable"
        :data="usertableData"
        tooltip-effect="dark"
        style="width: 100%"
        highlight-current-row
        @current-change="handleCurrentChange"
      >
        <!-- <el-table-column type="radio" width="55"></el-table-column> -->
        <el-table-column type="radio" width="120" label="选项用户id">
          <template slot-scope="scope">
            <el-radio
              :label="scope.row.id"
              v-model="selectedId"
              @change="handleRadioChange(scope.row)"
            >&nbsp;</el-radio>
          </template>
        </el-table-column>
        <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>

        <el-table-column align="center" label="头像">
          <template slot-scope="scope">
            <el-popover placement="top-start" title trigger="hover">
              <img :src="scope.row.himg" alt style="max-width:150px" />
              <el-avatar
                slot="reference"
                shape="square"
                :size="50"
                fit="scale-down"
                :src="scope.row.himg"
              ></el-avatar>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="nickname" label="用户信息" width="120px">
          <template slot-scope="scoped">
            <div>{{scoped.row.nickname}}</div>
            <div>{{scoped.row.name}}</div>
            <div>{{scoped.row.mobile}}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="add_time" label="注册时间">
          <template slot-scope="scoped">
            <div>{{returnTimeTxt(scoped.row.add_time) }}</div>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align: right">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="userquery.currentPage"
          :total="userquery.total"
          @current-change="usercurrentChange"
        ></el-pagination>
      </div>
      <el-form ref="form" :model="form" label-width="120px" style="margin-top: 20px;">
        <el-form-item>
          <el-button type="primary" @click="onSubmitUser">立即创建</el-button>
          <el-button @click="handleClose">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import {
  userLowerUsers,
  updateBiTime,
  addUserPost,
  consumerList
} from '@/api/consumer'

import { parseTime } from '@/utils/index'
export default {
  props: {
    user_id: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
      // 分页数据
      query: {
        total: 0,
        currentPage: 1,
        pageSize: 10
      },
      userquery: {
        total: 0,
        currentPage: 1,
        pageSize: 10,
        keywords: ''
      },
      tableData: [],
      usertableData: [],
      dialogVisible: false,
      userdialogVisible: false,
      form: {},
      selectedId: null
    }
  },
  mounted() {},
  watch: {
    user_id: {
      immediate: true,
      handler: function (newVal, oldVal) {
        if (newVal) {
          //   this.getlowerUsers();
        }
      }
    }
  },
  methods: {
    handleCurrentChange(val) {
      this.selectedId = val.id
    },
    handleRadioChange(row) {
      this.selectedId = row.id
    },
    onSubmitUser() {
      if (this.selectedId) {
        addUserPost({
          user_id: this.selectedId,
          id: this.user_id
        }).then((res) => {
          if (res.st == 1) {
            this.$message({
              message: '添加成功',
              type: 'success'
            })
            this.userdialogVisible = false
            this.getlowerUsers()
          } else {
            this.$message({
              message: res.msg,
              type: 'error'
            })
          }
        })
      } else {
        this.$message({
          message: '请选择用户',
          type: 'error'
        })
      }
    },
    add(row) {
      this.userquery.currentPage = 1
      this.userdialogVisible = true
      this.getConsumerList()
    },
    searchUser() {
      this.userquery.currentPage = 1
      this.getConsumerList()
    },
    //获取用户列表
    async getConsumerList() {
      this.loading = true
      const res = await consumerList({
        keywords: this.userquery.keywords,
        // limit: this.userquery.pageSize,
        // page: this.userquery.currentPage,
        limit: this.userquery.pageSize,
        page: this.userquery.currentPage,
        is_new: 1
      })
      this.userquery.total = res.count
      this.usertableData = res.data
      // this.tableData.forEach((item) => {
      //   if (item.add_time == 0) {
      //     item.add_time = '-'
      //   } else {
      //     item.add_time = parseTime(item.add_time, '{y}-{m}-{d} {h}:{i}:{s}')
      //   }
      //   if (item.last_time == 0) {
      //     item.last_time = '-'
      //   } else {
      //     item.last_time = parseTime(item.last_time, '{y}-{m}-{d} {h}:{i}:{s}')
      //   }
      // })
    },
    returnTimeTxt(row) {
      return parseTime(row, '{y}-{m}-{d} {h}:{i}:{s}')
    },
    edit(row) {
      this.dialogVisible = true
      this.form = Object.assign({}, row, {
        user_id: row.id,
        endTime: row.new_pass_time ? row.new_pass_time * 1000 || '' : ''
      })
    },
    handleClose(done) {
      this.dialogVisible = false
      this.userdialogVisible = false
      this.selectedId = null
    },
    parseTime,
    // 获取下级用户列表
    async getlowerUsers() {
      const { data, count } = await userLowerUsers({
        user_id: this.user_id,
        page: this.query.currentPage,
        limit: this.query.pageSize
      })
      this.tableData = data
      this.query.total = count
    },

    //重置

    //分页改变
    currentChange(current) {
      this.query.currentPage = current
      this.getlowerUsers()
    },
    usercurrentChange(current) {
      this.userquery.currentPage = current
      this.getConsumerList()
    },
    onSubmit() {
      this.form.new_pass_time = this.form.endTime
      updateBiTime(this.form).then((res) => {
        this.$message({
          message: '修改成功',
          type: 'success'
        })
        this.dialogVisible = false
        this.getlowerUsers()
      })
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields()
    }
  }
}
</script>

<style lang="scss" scoped>
.box-card {
  margin-bottom: 20px;
}
.search {
  display: flex;
  align-items: center;
}
// ::v-deep .el-input {
//   width: 292px;
//   display: block;
//   position: static !important;
// }
// ::v-deep .el-input--medium .el-input__inner {
//   width: 292px;
// }

::v-deep .el-form-item__label {
  padding: 0 30px 0 0;
}
</style>
